<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org" th:style="'background-image: url('+@{/image/login/3.jpg}+')'">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登陆</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }a

         #loginDiv {
             width: 37%;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 300px;
             background-color: rgba(75, 81, 95, 0.3);
             box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
             border-radius: 5px;
         }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;

            color: black;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 35px;
            width: 200px;
            background-color: white;
            outline: none;
            color: black;
            padding-left: 10px;
        }

        .button {
            border-color: black;
            background-color: rgba(255, 255, 255, 0.7);
            color: black;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div id="loginDiv">
    <form th:action="@{/admin/login.do}" id="form" method="post">
        <h1 style="text-align: center;color: black;">管理员登录</h1>
        <p>
            用户名:<input type="text" id="adminUserName" name="admin_username" th:value="${admin_username}" onblur="checkAdminUserName()">
            <label id="admin"></label><br>
            <span style="margin-left:65px;color: #ff0000;font-size: 16px" th:text="${adminUserNameerr}" id="adminUserNameerr"></span>
        </p>
        <p>
            密&nbsp;&nbsp;&nbsp;码:<input type="password" name="admin_password" id="adminPassword">
            <label id="password_trip"></label><br>
            <span style="margin-left:65px;color: #ff0000;font-size: 16px" th:text="${adminPassworderr}" id="adminPassworderr"></span>
        </p>
        <div style="text-align: center;margin-top: 30px;">
            <input type="submit" class="button" value="登录">
            <input type="reset" class="button" value="重置">
        </div>
    </form>
</div>
<script th:src="@{/assets/js/jquery-3.2.0.js}" type="text/javascript" charset="utf-8"></script>
<script>
    function checkAdminUserName(){
        var adminUserName = $('#adminUserName').val();
        //2-16个字符，支持中英文、数字、减号或下划线
        var adminUserNameStr = /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,16}$/;
        var expadminUserName = new RegExp(adminUserNameStr);
        if(expadminUserName.test(adminUserName)==false){
            $('#adminUserNameerr').text("请输入正确格式的用户名");
        }else{
            $('#adminUserNameerr').text("");
        }
        if(adminUserName.length==0){
            $('#adminUserNameerr').text("");
        }
    }
</script>

</body></html>